<template>
	<div>
		<div class="selectBox">
	      <div>
	        <el-form ref="paramform" :model="searchData" size="mini"  inline>
	          <el-form-item :label="item.name" v-for="(item,index) in selectObj.slice(0,3)" :key="index">
	          	<!-- 根据需要显示的输入框类型进行动态显示 -->
	            <el-input :placeholder="item.name" @input="searchData[item.modelName] = verifyfilter(item.verifyTpye, searchData[item.modelName])"  v-if="item.type =='inputVerify'" v-model="searchData[item.modelName]"  clearable style="width:150px" @keyup.enter.native="searchHandler"></el-input>
	            <el-input :placeholder="item.name"  v-if="item.type =='input'" v-model="searchData[item.modelName]"  clearable style="width:150px" @keyup.enter.native="searchHandler"></el-input>
	            <el-select :placeholder="item.name" v-if="item.type =='select'" v-model="searchData[item.modelName]" @change="(i)=>changeSelect(i,item.modelName)" clearable filterable style="width:150px"  @keyup.enter.native="searchHandler">
	              <el-option v-for="opt in item.selectData" :key="opt[item.selectValue]" :label="opt[item.selectLabel]" :value="opt[item.selectValue]"></el-option>
	            </el-select>
	          </el-form-item>  
	          <el-form-item>
				  <el-button @click="showOrHidden = !showOrHidden" size="mini" v-if="selectObj.length>3">高级查询<i class="el-icon-caret-bottom"></i></el-button>

				  <el-button type="primary" icon="el-icon-search" @click="searchHandler" ref="searchDom">查询</el-button>
				  <el-button icon="el-icon-refresh" @click="resetSearch" ref="searchDom">重置</el-button>

	          </el-form-item>
	        </el-form>
	      </div>
	      <div>
	          <!-- 新增按钮 -->
	          <!-- <el-button size="mini" type="primary" icon="el-icon-plus" @click="addFunc">新建</el-button>
	          <el-button size="mini" type="primary" @click="examineC">审核</el-button> -->
	          <el-button 
              v-for="item in buttonList" :key="item.label"
              size="mini" 
              :type="item.type" 
              :icon="item.icon" 
              @click="buttonClick(item.click)"
              :disabled="item.disabled"
              v-hasPermi="[item.permission]"
            >{{item.label}}</el-button>
            <el-select 
              :placeholder="'请选择' + item.name" 
              v-for="item in endSelect"  
              :key="item.name"
              size="mini"
              v-model="searchData[item.modelName]"  
              @change="(i)=>handleChange(i,item.selectData)"
              filterable style="width:150px;margin-left:10px"  
            >
              <el-option 
                v-for="opt in item.selectData" 
                :key="opt[item.selectValue]" 
                :disabled="opt.disabled"
                :label="opt[item.selectLabel]" 
                :value="opt[item.selectValue]"></el-option>
            </el-select>
	      </div>
	    </div>
		<div class="search_form commonSearch" v-show="showOrHidden" style="border-top: none;border-bottom: none;justify-content: start;padding-left: 5px">
			<div label v-for="(item,index) in selectObj.slice(3,20)" :key="index" >
				<el-input size="mini"  :placeholder="item.name" @input="searchData[item.modelName] = verifyfilter(item.verifyTpye, searchData[item.modelName])"  v-if="item.type =='inputVerify'" v-model="searchData[item.modelName]"  clearable style="width:150px" @keyup.enter.native="searchHandler"></el-input>
				<el-input  size="mini"  :placeholder="item.name"  v-if="item.type =='input'" v-model="searchData[item.modelName]"  clearable style="width:150px" @keyup.enter.native="searchHandler"></el-input>
				<el-select  size="mini"  :placeholder="item.name" v-if="item.type =='select'" v-model="searchData[item.modelName]"  clearable filterable style="width:150px"  @keyup.enter.native="searchHandler">
					<el-option size="mini"  v-for="opt in item.selectData" :key="opt[item.selectValue]" :label="opt[item.selectLabel]" :value="opt[item.selectValue]"></el-option>
				</el-select>
			</div>
		</div>
	</div>
</template>

<script>
export default {
  name: 'headerSearch',
  data() {
    return {
      searchData: {},
      showOrHidden: false
    }
  },
  props: {
    // 搜索框集合
    selectObj: {
      type: Array,
      default: []
    },
    endSelect: {
      type: Array,
      default: () => []
    },
    buttonList: {
      type: Array,
      default: () => [
        { label: '新建', type: 'primary', icon: 'el-icon-plus', click: () => {} }
      ]
    },
    // 查询按钮事件
    goSearchFc: {
      type: Function
    }
  },
  activated() {
    // alert(this.$store.state.app.searchResouce)
    if (this.$store.state.app.searchResouce === 'menu') {
      this.searchData = {}
    }
  },
  methods: {
    // 查询按钮事件
    searchHandler() {
      this.goSearchFc(this.searchData);
    },
    // 新增按钮事件回传
    addFunc() {
      this.addFun();
    },
    // 审核事件回传
    examineC() {
      this.examine()
    },
    // 修改下拉框数据触发事件
    handleChange(i, data) {
      this.$emit('handleChange', i, data)
    },
    changeSelect(i, val) {
      this.$emit('changeSelect', i, val)
    },
    /**
     * 按钮事件
     */
    buttonClick(i, e) {
      console.log(e, 'eee');
      i()()
    },
    /**
	 * 重置事件
	 */
    resetSearch() {
      for (const key in this.searchData) {
        this.searchData[key] = ''
      }
    }
  }

}
</script>
<style lang="less" scoped>
	@import "../../../assets/searchfrom.less";

	.selectBox {
		justify-content: space-between;
		display: flex;
		background: #F5F7FA;
		border: 1px solid #e1e4eb;
		border-left: none;
		line-height: 28px;
		height: 37px;
		padding-top: 8px;
		padding-left: 14px;
		padding-right: 20px;
		border-bottom-width: 0;
        border-right-width: 0;
        border-radius: 4px 4px 0 0;
	}

</style>
